<template>
  <div class="publicity">
    <!-- publicity -->

    <!-- header -->
    <Header style="z-index: 2;" class="sha1"></Header>

    <!-- content -->
    <div class="publicity-content" style="z-index: 1;">
      <!-- left -->
      <div class="publicity-left">
        <div class="publicity-aside-menu">
          <div> <i class="el-icon-s-management"></i> <span>精品模版</span> </div>
          <div> <i class="el-icon-document"></i> <span>我的作品</span> </div>
          <div> <i class="el-icon-circle-plus-outline"></i> <span>新建项目</span> </div>
        </div>

        <div class="publicity-aside-slider">
          <img :src="`${env.publicPath}images/logo-1.png`" alt="">
        </div>

        <div class="publicity-aside-classify">
          <label>创意设计</label>

          <div>
            <p>
              <i style="color: blue;" class="el-icon-s-management"></i>
              <span>分页</span>
              <i class="el-icon-arrow-down menu-down"></i>
            </p>
            <div class="">
              <p>模版中心</p>
              <p>模版中心</p>
            </div>
          </div>
          <div>
            <p>
              <i style="color: orange;" class="el-icon-s-management"></i>
              <span>长页</span>
              <i class="el-icon-arrow-down menu-down"></i>
            </p>
          </div>
          <div>
            <p>
              <i style="color: purple;" class="el-icon-s-management"></i> <span>表单</span> <i class="el-icon-arrow-down menu-down"></i>
            </p>
          </div>
          <div>
            <p>
              <i style="color: yellow;" class="el-icon-s-management"></i> <span>互动</span> <i class="el-icon-arrow-down menu-down"></i>
            </p>
          </div>
          <div>
            <p>
              <i style="color: green;" class="el-icon-s-management"></i> <span>视频</span> <i class="el-icon-arrow-down menu-down"></i>
            </p>
          </div>
          <div>
            <p>
              <i style="color: #00e8ce;" class="el-icon-s-management"></i> <span>3D</span> <i class="el-icon-arrow-down menu-down"></i>
            </p>
          </div>
          <div>
            <p>
              <i style="color: #f26522;" class="el-icon-s-management"></i> <span>Card</span> <i class="el-icon-arrow-down menu-down"></i>
            </p>
          </div>

          <label>其他</label>
          <div>
            <p>
              <i style="color: blue;" class="el-icon-s-management"></i>
              <span>案例</span>
              <i class="el-icon-arrow-down menu-down"></i>
            </p>
            <div class="">
              <p>模版中心</p>
              <p>模版中心</p>
            </div>
          </div>
        </div>
      </div>

      <!-- middle -->
      <div class="publicity-middle scroll-bar-cls">
        <!-- search -->
        <div class="publicity-middle-search">
          <div>
            <el-input
              :input-style="{color: 'blue'}"
              v-model="input3"
              placeholder="Please input"
              class="input-with-select">
                <template #prepend>
                  <el-select v-model="select" placeholder="Select" style="width: 110px">
                    <el-option label="Restaurant" value="1"></el-option>
                    <el-option label="Order No." value="2"></el-option>
                    <el-option label="Tel" value="3"></el-option>
                  </el-select>
                </template>
                <template #append>
                  <el-button type="primary" icon="Search"></el-button>
                </template>
            </el-input>
          </div>
          <p>
            <span>咔咔</span>
            <span>ccc</span>
            <span>aaa</span>
          </p>
        </div>

        <!-- slider -->
        <div class="publicity-middle-slider">
          <img :src="`${env.publicPath}images/logo-1.png`" alt="">
        </div>

        <!-- chunks -->
        <!-- 1 -->
        <!-- 2 -->
        <!-- 3 -->
        <div class="publicity-middle-chunks">
          <div class="publicity-middle-chunks-item">
            <div class="publicity-middle-chunks-item-title">
              <h2>精选模版 <span> derder </span> </h2>

              <span>didid</span>
              <span>didid</span>
              <span>didid</span>
              <span>didid</span>
              <span>didid</span>
              <span>didid</span>
              <span>didid</span>

              <a href="javascript:;"> 查看更多 <i class="el-icon-arrow-right"></i> </a>
            </div>

            <div class="produ-item">
              <div class="">
                <div class="sha1">
                  <div class="">

                  </div>
                </div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- footer -->
  </div>
</template>

<script>
  // import { ref, watch, toRefs, computed } from 'vue';
  import Header from '@/views/child/publicity/Header.vue';
  export default {
    name: 'Publicity',
    data() {
      return {
        input3: '',
        select: '1',
      }
    },
    components: {
      Header
    },
  }
</script>

<style lang="scss">
  @import '@/assets/css/common.scss';

  .publicity {
    min-width: 1200px;

    .publicity-content {
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      bottom: 0;
      min-width: 1200px;

      .publicity-left {
        position: absolute;
        width: 200px;
        top: 0;
        left: 0;
        bottom: 0;
        background: #fefefe;
        padding-top: 20px;
        padding-left: 18px;
        padding-right: 18px;

        .publicity-aside-menu {
          &>div {
            position: relative;
            line-height: 40px;
            padding-left: 20px;
            padding-right: 8px;
            color: #333;
            font-weight: 400;
            border-radius: 4px;

            display: flex;
            align-items: center;

            >i {
              font-size: 20px;
              font-weight: 600;
            }
            >i.menu-down {
              position: absolute;
              right: 8px;
              font-size: 12px;
              font-weight: normal;
              margin-left: 12px;
              transition: all .3s ease-in-out;
            }
            >span {
              margin-left: 16px;
              font-size: 14px;
            }

            &:hover {
              background: #eef4ff;
              color: #1261ff;
              font-weight: 600;

              >i.menu-down {
                transform: rotateZ(180deg);
              }
            }
          }
        }
        .publicity-aside-slider {
          margin: 8px 0;
          background: orange;
          border-radius: 4px;
          overflow: hidden;

          >img {
            display: block;
            width: 100%;
            height: 40px;
            object-fit: cover;
          }
        }
        .publicity-aside-classify {
          >label {
            display: block;
            font-size: 12px;
            padding-left: 18px;
            padding-top: 20px;
            color: #a0a0a0;
          }
          &>div>p {
            position: relative;
            line-height: 50px;
            padding-left: 20px;
            padding-right: 8px;
            color: #333;
            font-weight: 400;
            border-radius: 4px;

            display: flex;
            align-items: center;

            >i {
              font-size: 20px;
              font-weight: 600;
            }
            >i.menu-down {
              position: absolute;
              right: 8px;
              font-size: 12px;
              font-weight: normal;
              margin-left: 12px;
              transition: all .3s ease-in-out;
            }
            >span {
              margin-left: 16px;
              font-size: 14px;
            }

            &:hover {
              background: #eef4ff;
              color: #1261ff;
              font-weight: 600;

              >i.menu-down {
                transform: rotateZ(180deg);
              }
            }
          }
          &>div>div {
            height: 0px;
            padding-left: 60px;
            background: #fafafa;
            // padding-bottom: 12px;
            transition: all .3s ease-in-out;
            overflow: hidden;

            >p {
              line-height: 30px;
              font-size: 12px;
              color: #666;
            }
          }

          &>div:hover {
            >div {
              height: 100px;
              padding-bottom: 12px;
            }
          }
        }
      }

      .publicity-middle {
        position: absolute;
        top: 0;
        left: 200px;
        right: 0;
        bottom: 0;
        background: #fff;
        overflow: auto;

        .publicity-middle-search {
          padding-top: 32px;
          height: 136px;

          display: flex;
          flex-direction: column;
          align-items: center;

          >div {
            width: 500px;
            margin-bottom: 12px;
          }
          >p {
            width: 500px;
            font-size: 12px;
            line-height: 24px;
            color: #555;

            >span {
              margin: 0 12px;
              cursor: pointer;

              &:hover {
                color: #1261ff;
              }
            }
          }
        }
        .publicity-middle-slider {
          margin: 0 52px;
          // width: 100%;
          height: 260px;
          border-radius: 8px;
          background: orange;
          overflow: hidden;

          display: flex;
          justify-content: center;

          >img {
            display: block;
            // width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .publicity-middle-chunks {
          margin: 0 52px;
          padding-top: 50px;

          .publicity-middle-chunks-item {
            >.publicity-middle-chunks-item-title {
              display: flex;
              align-items: center;

              padding-right: 77px;

              >h2 {
                padding-right: 24px;

                >span {
                  font-size: 14px;
                  font-weight: normal;
                  color: #c28f66;
                  margin-left: 12px;
                }
              }

              >span {
                display: inline-block;
                padding: 8px 16px;
                margin-left: 16px;
                font-size: 14px;
                line-height: 14px;
                border-radius: 18px;
                color: #333;
                background: #f3f4f7;

                &:hover {
                  color: #1261ff;
                  background: #eef4ff;
                }
              }

              >a {
                position: absolute;
                right: 52px;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #666;
              }
            }
            >.produ-item {
              padding-top: 20px;
              padding-bottom: 64px;
              overflow: hidden;

              >div {
                // overflow: hidden;
                width: 3600px;

                >div {
                  position: relative;
                  display: inline-block;
                  margin-right: 24px;
                  width: 184px;
                  height: 279px;
                  border-radius: 4px;
                  background: #333;
                  transition: all .3s ease-in-out;

                  >div {
                    position: absolute;
                    bottom: -60px;
                    background: orange;
                    width: 100%;
                    height: 60px;
                  }

                  &:hover {
                    transform: translateY(-10px);
                    box-shadow: 0px 5px 20px rgb(18 123 255 / 50%);
                    z-index: 1;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
